<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <style>
        table {
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            var trs = document.getElementsByClassName("colorClass");
            for (i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function () {
                    this.style.backgroundColor = "gray";
                };
                trs[i].onmouseout = function () {
                    this.style.backgroundColor = "";
                }
            }
        };

        function add() {
            window.location.href = "/servlet?cmd=saveOrUpdate";
        }

        function update(id) {
            window.location.href = "/servlet?cmd=saveOrUpdate&id=" + id;
        }

        function del(id) {
            //confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
            //如果访问者点击"确定"，此方法返回true，否则返回false。
            var flag = window.confirm("亲,确定好了要删除我吗?");
            if (flag) {
                window.location.href = "/servlet?cmd=delete&id=" + id;
            }
        }

        function toPage(num) {

            if (num) {
                if (num >${pageResult.totalPage}) {
                    document.getElementById("currentPage").value =  ${pageResult.totalPage};
                } else if (num < 1) {
                    document.getElementById("currentPage").value = 1;
                } else {
                    document.getElementById("currentPage").value = num;
                }
            }
            document.forms[0].submit();
        }
    </script>
</head>
<body>
<form action="/servlet" method="post">
    <div align="center">
        <input type="button" value="新增" onclick="add()"><br/>
        高级查询:
        名称:<input type="text" name="name" value="${qo.inputString}">
        最小年龄:<input type="text" name="minAge" value="${qo.minAge}">
        最大年龄:<input type="text" name="maxAge" value="${qo.maxAge}">
        <input type="submit" value="提交">
    </div>

    <table border="1px" cellspacing="0" align="center">
        <tr align="center">
            <th>序号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>薪水</th>
            <th>时间</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
        <c:forEach items="${pageResult.data}" var="user" varStatus="status">
            <tr align="center" class="colorClass">
                <td>${status.count}</td>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.salary}</td>
                <td><fmt:formatDate value="${user.hiredate}" pattern="yyyy年MM月dd日"></fmt:formatDate></td>
                <td><a href="javascript:update(${user.id})">编辑</a></td>
                <td><a href="javascript:del(${user.id})">删除</a></td>
            </tr>
        </c:forEach>

        <tr>
            <td colspan="7">
                <a href="#" onclick="toPage(1)">首页</a>
                <a href="#" onclick="toPage(${pageResult.prevPage})">上一页</a>
                <a href="#" onclick="toPage(${pageResult.nextPage})">下一页</a>
                <a href="#" onclick="toPage(${pageResult.totalPage})">尾页</a>

                当前页是：${pageResult.currentPage}
                共${pageResult.totalCount}条数据
                跳转至<input id="currentPage" type="text" name="currentPage" onchange="toPage(this.value)"
                          value="${pageResult.currentPage}">页
                每页显示<select name="pageSize" onchange="toPage()">
                <option value="3" ${pageResult.pageSize==3?'selected':''}>3</option>
                <option value="5" ${pageResult.pageSize==5?'selected':''}>5</option>
                <option value="7" ${pageResult.pageSize==7?'selected':''}>7</option>
            </select>条数据
            </td>
        </tr>
    </table>
</form>
</body>
</html>
